<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习2</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>你喜欢哪个角色？</h1>
        <input type="checkbox" v-model="allCheck" @change="allClick()">全选
        <br>

        <div>
            <span v-for="(item, index) in roles">
                <input type="checkbox" v-model="item.check" @change="checkClick()">{{item.name}}
            </span>
        </div>

        新增其他：<input type="text" v-model="newRole">
        <!-- 上传 -->
        <div>
            <input type="file" @change="load($event)"><button type="submit" @click="addRoles(newRole)">上传</button>
        </div>
<!-- 便利按钮 -->
        <div>
            <!-- <span v-for="(item) in choice">
                <button @click="allClick()">{{item}}</button>
            </span> -->
            <button @click="allClick()">全选</button>
            <button @click="un_allClick()">全不选</button>
            <button @click="reverseClick()">反选</button>

        </div>
        <div>
            <span v-for="(item) in roles">
                <img :src="item.src" style="width: 150px; height: 250px;" v-show="item.check">
            </span>
        </div>

    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                roles:[
                    {name:'孙悟空', check:false, src:'./孙悟空.JPG'},
                    {name:'小白龙', check:false, src:'./小白龙.JPG'},
                    {name:'唐僧', check:false, src:'./唐僧.JPG'}
                ],
                // choice:['全选','全不选','反选'],
                newRole:'',
                fileSrc:'',
                allCheck:false,
            }
        },
        methods: {
            allClick(){
                this.allCheck=true;
                this.roles.forEach(element => {
                    element.check = this.allCheck;
                });
            },
            un_allClick(){
                this.allCheck=false;
                this.roles.forEach(element => {
                    element.check = this.allCheck;
                });
            },//检查长度取消全选
            reverseClick(){
                let len = this.roles.length;
                this.roles.forEach(element => {
                    element.check = !element.check;
                    if (!element.check) len--;
                })
                this.allCheck = (len == this.roles.len) ? true : false;

            },
            checkClick(){
                let len = this.roles.length;
                this.roles.forEach(element => {
                    if (!element.check) len--;
                })
                this.allCheck = (len == this.roles.len) ? true : false;
            },
            load(e){
                let file = e.target.files;
                let img = new FileReader();
                img.readAsDataURL(file[0]);
                img.onload = ({target}) => {
                    alert("上传成功");
                    this.fileSrc = target.result;
                };
            },
            addRoles(){
                // console.log(this.fileSrc.split('.')[1]);
                if (this.newRole.length != 0 && this.fileSrc != null)
                    this.roles.push({name:this.newRole, check:false, src:this.fileSrc})
            },
        },
        computed:{
            choiceFunc(){
                // if ();
            }
        }
    }).mount("#app")
</script>